<template>
  <div class="aside tree-container">
    <div class="first-tree">
      <span>章节列表</span>
      <el-button
        class="add"
        :disabled="
          $store.getters.curCourse.status == 1 ||
          $store.getters.curCourse.auditStatus == 4
        "
        @click="append()"
        type="custom"
        plain
        size="mini"
        >新增章</el-button
      >
    </div>
    <el-tree
      class="tree filter-tree"
      :data="data"
      :props="defaultProps"
      node-key="id"
      :expand-on-click-node="false"
      :default-expanded-keys="expandedIds"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span
          class="label-name"
          :title="node.label"
          @click="handleNodeClick(data)"
        >
          {{ node | titleName }}</span
        >
        <span class="btns">
          <el-tooltip
            :content="data.pid == 0 ? '添加节' : '添加知识点'"
            effect="light"
            placement="top"
          >
            <el-button
              type="text"
              size="mini"
              icon="el-icon-plus"
              :disabled="
                $store.getters.curCourse.status == 1 ||
                $store.getters.curCourse.auditStatus == 4
              "
              @click="() => append(data)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top" effect="light">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-minus"
              :disabled="
                $store.getters.curCourse.status == 1 ||
                $store.getters.curCourse.auditStatus == 4
              "
              @click="() => remove(node, data)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="编辑" placement="top" effect="light">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-edit"
              :disabled="
                $store.getters.curCourse.status == 1 ||
                $store.getters.curCourse.auditStatus == 4
              "
              @click="() => edit(data)"
            ></el-button>
          </el-tooltip>
        </span>
      </span>
    </el-tree>
    <TreeAdd />
  </div>
</template>
<script>
import { sysCourseChapterQuery } from "@/api/admin/courseLibrary/sysCourseChapter.js";
import TreeAdd from "./TreeAdd.vue";
import { ChapterTreeDelete } from "../../mixins/ChapterTreeDelete";
import Bus from "@/utils/bus.js";
export default {
  mixins: [ChapterTreeDelete],
  components: {
    TreeAdd,
  },
  data() {
    return {
      defaultProps: {
        children: "childList",
        label: "name",
      },
      listQuery: {
        pid: 0,
        page: 1,
        limit: 9999,
        courseId: this.$store.getters.courseId, //课程ID
      },
      tableData: [],
      data: [],
      expandedIds: [],
    };
  },
  computed: {
    chapterTitle() {
      return function (v) {
        if (v.pid == 0) return "添加节";
        if (v.pid != 0) return "添加知识点";
      };
    },
  },
  mounted() {
    this.getTree();
    Bus.$on("refreshListChapterTree", (v) => {
      if (v) {
        Object.assign(this.listQuery, v);
      }
      this.getTree();
    });
  },
  beforeDestroy() {
    Bus.$off("refreshListChapterTree");
  },
  methods: {
    getTree() {
      sysCourseChapterQuery(this.listQuery).then((res) => {
        this.tableData = res.data.data;
        this.data = res.data.data;
        if (!this.data.length) return;
        this.data.forEach((item, idx) => {
          item.index = idx;
          item.childList.forEach((_item, index) => {
            _item.childList = [];
            _item.index = index;
          });
        });
        this.expandedIds = this.data.map((v) => v.id);
      });
    },
    handleNodeClick(data) {
      let chapterId = "";
      if (data.type == 1 && data.childList.length) {
        chapterId = data.childList.map((v) => v.id).toString();
      } else {
        chapterId = data.id;
      }
      if (this.$route.name != "course-knowledge-list") {
        this.$router.push({
          name: "course-knowledge-list",
          query: { chapterId },
        });
        return;
      }
      Bus.$emit("refreshKnowledgeList", { chapterId });
    },
    append(data) {
      if (data) {
        if (data.pid == 0) {
          //添加节点
          Bus.$emit("showDialogChapterAdd", {
            type: "add",
            data,
            tableData: [],
          });
        } else {
          //添加知识点
          this.$router.push({
            name: "course-knowledge-create",
            query: { chapterId: data.id },
          });
          // Bus.$emit("showDialogKnowledgeAdd", { type: "add", data });
        }
      } else {
        Bus.$emit("showDialogChapterAdd", { type: "add" });
      }
    },
    //编辑节点
    edit(data) {
      Bus.$emit("showDialogChapterAdd", {
        type: "edit",
        data,
        tableData: this.tableData,
      });
    },
  },
  filters: {
    titleName(data) {
      if (data.level == 1) {
        return "第" + (data.data.index + 1) + "章：" + data.label;
      } else {
        return "第" + (data.data.index + 1) + "节：" + data.label;
      }
    },
  },
};
</script>
<style scoped>
.aside {
  line-height: 26px;
  /* height: 740px; */
  text-align: left;
  font-size: 14px;
}
.aside::-webkit-scrollbar {
  display: none;
}
.custom-tree-node {
  border-bottom: 0 none;
  display: block;
  width: 300px;
}
.label-name {
  float: left;
  /* max-width: 65%; */
  width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btns {
  float: right;
  padding-right: 10px;
}
.aside >>> .el-tree-node__content {
  padding-bottom: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px dashed #eee;
}
.first-tree {
  height: 28px;
  padding: 14px 10px;
  line-height: 28px;
  border-bottom: 1px solid #eee;
}
.first-tree .add {
  float: right;
  margin-left: 10px;
}
.aside >>> .el-tree-node.is-current {
  background: #f5f7fa;
}
.el-tree-node__children .custom-tree-node {
  width: 280px;
}
</style>